<template>
  <div class="content-info">
    <LabelTitle text="工作待办" :showImg="false"></LabelTitle>
    <div class="rightbtn" @click="seeAllData">查看全部 ></div>
    <div class="content-box mt10">
      <div class="event-box">
        <template v-if="eventlist.length > 0">
          <div
            class="event-item"
            v-for="(item, index) in eventlist"
            :key="index"
            @click.stop="seedetail(item)"
          >
            <!-- <img class="img" src="../../../assets/images/zdjy.png" /> -->
            <!-- <el-empty class="img" :image-size="30" description="无照片" v-else /> -->
            <div class="rightinfo">
              <div class="title-box">
                <span class="title">【{{ item.eventName }}】</span>
                <span class="tip" :class="getClass(item.eventStatusCode)">{{
                  item.eventStatus
                }}</span>
                <div
                  class="tiltebtnr"
                  @click.stop="changeRow(item.busizEventId, 'pf')"
                  v-if="
                    leaderList.indexOf(UserId) > -1 &&
                    item.eventStatusCode !== '10'
                  "
                >
                  指派
                </div>
                <div
                  @click.stop="changeRow(item.busizEventId, 'cz')"
                  class="tiltebtnr"
                  v-else
                >
                  处置
                </div>
              </div>
              <!-- <p class="text exlipse mt10" :title="item.address">
              时间：{{ item.eventTime }}
              <span style="padding-left: 40px"> 地址：{{ item.address }}</span>
            </p> -->

              <p class="text exlipse mt10" :title="item.eventTime">
                时间：{{ item.eventTime }}
              </p>
              <p class="text exlipse mt10" :title="item.address">
                地址：{{ item.address }}
              </p>
            </div>
            <!-- <div class="rightbtn-f">></div> -->
          </div>
        </template>
        <div v-else class="no-data">
          <img src="../../../../assets/images/empty.png" alt="暂无数据" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <SelfDialog
      :dialogVisable="dialogVisable"
      :height="currentType == 'pf' ? '320px' : '474px'"
      :title="currentType == 'pf' ? '指派' : '事件处置'"
      @close="close"
      @confirm="confirm"
    >
      <template #default>
        <div class="center_content-pf" style="padding: 20px 25px">
          <cz ref="czref" v-if="currentType !== 'pf'"></cz>
          <el-form
            v-else
            ref="ruleFormRef"
            :model="formValue"
            label-width="auto"
            class="ruleForm"
          >
            <el-form-item label="派发处置人员" prop="assignedMemberId">
              <el-select
                v-model="formValue.assignedMemberId"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in typeState.czry"
                  :key="item.memberId"
                  :label="item.memberName"
                  :value="item.memberId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </SelfDialog>
  </div>
</template>

<script setup>
import { ElMessage, ElNotification } from "element-plus";
import LabelTitle from "@/components/labeltitle.vue";
import { useUserStore } from "@/pinia/user.js";
const piniaUser = useUserStore();
import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();
import SelfDialog from "@/components/dialog/dialog.vue";
import cz from "@/components/event/cz.vue";
import { TypeMin } from "@/utils/type.js";
import { onMounted } from "vue";
import { getzdbList, dispatchEvent, completeEvent } from "@/api/event.js";
const { typeState } = TypeMin();
const UserId = localStorage.getItem("User");
// 需要根据权限判断是否显示
//领导是数组list 科员队员的数组list
const leaderList = [
  "1903999283762434048",
  "1903999283762434049",
  "1903999283766628353",
  "1903999283766628355",
];
let eventlist = ref([]);

const getData = async () => {
  try {
    let { data } = await getzdbList({
      eventStatus: "10",
    });
    eventlist.value = data.busizEventList;
    console.log("工作待办", eventlist);
  } catch (e) {
    console.error(e);
  }
};
// 0	未派发    10	已派发  99	已处理  101	已复核

const getClass = (eventStatusCode) => {
  switch (eventStatusCode) {
    case "0":
      return "org";
    case "10":
      return "blue";
    case "99":
      return "green";
    case "101":
      return "purple";
    default:
      return "";
  }
};
const seedetail = (row) => {
  piniaTab.add({
    name: "处置详情",
    path: "/czdetail",
    icon: "",
    query: {
      busizEventId: row.busizEventId,
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
};

function seeAllData() {
  console.log("查看全部数据--指派列表");
  // router.push("/eventlist");
  piniaTab.add({
    name: "指派列表",
    path: "/fplist",
    icon: "",
    query: {},
    meta: {
      hidden: false,
      title: "",
    },
  });
}

let formValue = ref({
  assignedMemberId: "",
});
// 处置
let dialogVisable = ref(false);
let deletList = ref([]);
let currentType = ref("");
const changeRow = (value, type) => {
  try {
    currentType.value = type;
    if (type == "pf") {
      formValue.value.assignedMemberId = "";
    }
    formValue.value.busizEventId = value;
    dialogVisable.value = true;
    deletList.value = value;
  } catch (e) {
    console.error(e);
  }
};

// 取消分派
const close = () => {
  dialogVisable.value = false;
};

let czref = ref();
// 确认分派
const confirm = async () => {
  console.log("currentType.value", currentType.value);
  try {
    if (currentType.value == "pf") {
      if (!formValue.value.assignedMemberId) {
        ElMessage.error("请选择派发处置人员");
        return;
      }
      let { data } = await dispatchEvent({
        ...formValue.value,
      });
      console.log(formValue.value);
      getData();
      dialogVisable.value = false;
    } else {
      let info = czref.value.getValue();
      let { data } = await completeEvent({
        ...info,
        busizEventId: formValue.value.busizEventId,
      });
      console.log({
        ...info,
        busizEventId: formValue.value.busizEventId,
      });
      dialogVisable.value = false;
    }
    getData();
  } catch (e) {
    console.error(e);
  }
};

let webSocket = null;
let notification = null;
function clintWebsoket() {
  if (webSocket) {
    webSocket.close();
  }
  let str =
    process.env.NODE_ENV === "production"
      ? `wss://${
          window.location.host
        }/integrated-workbench/imserver/${localStorage.getItem("userId")}`
      : `ws://192.168.1.135:8085/integrated-workbench/imserver/${localStorage.getItem(
          "userId"
        )}`;
  // `ws://192.168.1.100:8085/enforcement/imserver/${piniaUser.user.memberId}`;
  webSocket = new WebSocket(str);
  webSocket.onopen = function (e) {
    console.log("websoket连接成功");
    // start(webSocket) //开启心跳
  };
  webSocket.onmessage = async (e) => {
    if (e.data == "WebSocket连接成功！") return;
    let data = JSON.parse(e.data);
    // ElNotification.close();
    ElNotification.closeAll();
    ElNotification({
      title: "新待办",
      message: "您有一条新的待办信息，请注意查收！",
      duration: 0,
    });

    getData();
  };
  webSocket.onerror = () => {
    // setTimeout(() => {
    //   clintWebsoket();
    // }, 60 * 1000);
    console.error("websoket断了");
  };
  webSocket.onclose = () => {
    // setTimeout(() => {
    //   clintWebsoket();
    // }, 60 * 1000);
    console.error("websoket关闭了");
  };
}

onMounted(() => {
  getData();
  // clintWebsoket();
});

onUnmounted(() => {
  if (webSocket) {
    webSocket.close();
  }
});
</script>

<style lang="scss" scoped>
.content-info {
  margin-top: 15px;
  // width: calc(50% - 10px);
  // width: 60%;
  flex: 1;
  // height: 418px;
  height: calc(100% - 300px);

  position: relative;
  .rightbtn {
    position: absolute;
    right: 0;
    top: 3px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    line-height: 20px;
    cursor: pointer;
  }
  .content-box {
    height: 420px;
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 15px;
    .event-box {
      width: 100%;
      height: 100%;
      overflow: auto;
      .event-item {
        margin-bottom: 10px;
        width: 100%;
        height: 116px;
        padding: 14px;
        // padding: 20px 32px 18px 26px;
        background: rgba(34, 99, 191, 0.06);
        box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
        border-radius: 12px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .img {
          width: 46px;
          height: 46px;
          border-radius: 4px;
          margin-right: 20px;
        }
        .rightinfo {
          flex: 1;
          .title-box {
            display: flex;
            align-items: center;
            position: relative;
            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
            }
            .tip {
              font-size: 12px;
              color: #45aff7;
              width: 55px;
              height: 24px;
              border-radius: 4px;
              background: #d2f0ff;
              border: 1px solid #a5dcff;
              text-align: center;
              line-height: 24px;
              margin: 0 12px;
              &.purple {
                background: #e3d2ff;
                color: #9053ff;
                border: 1px solid #c19cff;
                font-family: none;
              }
              &.green {
                background: #cbfff2;
                border: 1px solid #72d1c0;
                color: #39aa92;
                font-family: none;
              }
              &.org {
                background: #ffe9d2;
                color: #ff982b;
                border: 1px solid #ffbe7c;
                font-family: none;
              }
              &.blue {
                font-family: none;
                background: #d2f0ff;
                color: #45aff7;
                border: 1px solid #d2f0ff;
              }
            }
            .tiltebtnr {
              position: absolute;
              right: 30px;
              top: 20px;
              min-width: 38px;
              height: 26px;
              background: #2263bf;
              border-radius: 4px;
              font-size: 12px;
              color: #ffffff;
              line-height: 26px;
              cursor: pointer;
              text-align: center;
            }
          }
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
          }
        }
        .rightbtn-f {
          width: 8px;
          height: 14px;
          font-size: 14px;
          color: #bcc9db;
          line-height: 14px;
          cursor: pointer;
        }
      }
      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 20px;
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 20px;
        }
        img {
          width: 100px; // 根据需要调整图片宽度
          height: 100px; // 根据需要调整图片高度
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
